<!DOCTYPE html>
<html>
    <head>
        <title>Jdenticon</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <h1>"Icon0" - Should be equal</h1>
        <figure>
            <img src="" width="100" height="100">
            <figcaption><strong>IMG</strong> static image</figcaption>
        </figure>
        
        <figure>
            <canvas data-jdenticon-value="Icon0" width="100" height="100"></canvas>
            <figcaption><strong>Canvas</strong> data-jdenticon-value</figcaption>
        </figure>
        
        <h1>"Icon0" - Should be equal to above, but black and no background</h1>
        <figure>
            <img src="" width="100" height="100">
            <figcaption><strong>IMG</strong> static image</figcaption>
        </figure>
        
        <figure>
            <canvas id="explicit-config-update" data-jdenticon-value="Icon0" width="100" height="100"></canvas>
            <figcaption><strong>Canvas</strong> update()</figcaption>
        </figure>

        <figure>
            <canvas id="explicit-config-drawIcon" data-jdenticon-value="Icon0" width="100" height="100"></canvas>
            <figcaption><strong>Canvas</strong> drawIcon()</figcaption>
        </figure>

        <figure>
            <canvas id="explicit-config-jquery" data-jdenticon-value="Icon0" width="100" height="100"></canvas>
            <figcaption><strong>Canvas</strong> jQuery(value)</figcaption>
        </figure>

        <figure>
            <span id="explicit-config-toSvg"></span>
            <figcaption><strong>SVG</strong> toSvg(value)</figcaption>
        </figure>
    
        <h1>"Icon04" - Should be equal but different to the icon above</h1>
        <figure>
            <img src="" width="100" height="100">
            <figcaption><strong>IMG</strong> static image</figcaption>
        </figure>
        
        <figure>
            <canvas data-jdenticon-value="Icon04" width="100" height="100"></canvas>
            <figcaption><strong>Canvas</strong> data-jdenticon-value</figcaption>
        </figure>
        
        <figure>
            <canvas data-jdenticon-hash="f97deee25dde01afb80ec1c7e4fae746492ddacb" width="100" height="100"></canvas>
            <figcaption><strong>Canvas</strong> data-jdenticon-hash</figcaption>
        </figure>
        
        <figure>
            <canvas id="canvas-Jdenticon-update-hash" width="100" height="100"></canvas>
            <figcaption><strong>Canvas</strong> update(hash)</figcaption>
        </figure>
        
        <figure>
            <canvas id="canvas-Jdenticon-update-value" width="100" height="100"></canvas>
            <figcaption><strong>Canvas</strong> update(value)</figcaption>
        </figure>
        
        <figure>
            <canvas id="canvas-Jdenticon-jquery-hash" width="100" height="100"></canvas>
            <figcaption><strong>Canvas</strong> jQuery(hash)</figcaption>
        </figure>
        
        <figure>
            <canvas id="canvas-Jdenticon-jquery-value" width="100" height="100"></canvas>
            <figcaption><strong>Canvas</strong> jQuery(value)</figcaption>
        </figure>
        
        <figure>
            <canvas id="canvas-Jdenticon-drawIcon-hash" width="100" height="100"></canvas>
            <figcaption><strong>Canvas</strong> drawIcon(hash)</figcaption>
        </figure>
        
        <figure>
            <canvas id="canvas-Jdenticon-drawIcon-value" width="100" height="100"></canvas>
            <figcaption><strong>Canvas</strong> drawIcon(value)</figcaption>
        </figure>
        
        <figure>
            <span id="placeholder-canvas-Jdenticon-dynamic"></span>
            <figcaption><strong>Canvas</strong> dynamic</figcaption>
        </figure>
        
        <figure>
            <canvas id="canvas-Jdenticon-resize" data-jdenticon-value="Icon04" width="10" height="10"></canvas>
            <figcaption><strong>Canvas</strong> resize</figcaption>
        </figure>
        
        
        <figure>
            <svg data-jdenticon-value="Icon04" width="100" height="100"></svg>
            <figcaption><strong>SVG</strong> data-jdenticon-value</figcaption>
        </figure>
        
        <figure>
            <svg data-jdenticon-hash="f97deee25dde01afb80ec1c7e4fae746492ddacb" width="100" height="100"></svg>
            <figcaption><strong>SVG</strong> data-jdenticon-hash</figcaption>
        </figure>
        
        <figure>
            <svg id="svg-Jdenticon-update-hash" width="100" height="100"></svg>
            <figcaption><strong>SVG</strong> update(hash)</figcaption>
        </figure>
        
        <figure>
            <svg id="svg-Jdenticon-update-value" width="100" height="100"></svg>
            <figcaption><strong>SVG</strong> update(value)</figcaption>
        </figure>
        
        <figure>
            <svg id="svg-Jdenticon-jquery-hash" width="100" height="100"></svg>
            <figcaption><strong>SVG</strong> jQuery(hash)</figcaption>
        </figure>
        
        <figure>
            <svg id="svg-Jdenticon-jquery-value" width="100" height="100"></svg>
            <figcaption><strong>SVG</strong> jQuery(value)</figcaption>
        </figure>
        
        <figure>
            <span id="svg-Jdenticon-toSvg-hash"></span>
            <figcaption><strong>SVG</strong> toSvg(hash)</figcaption>
        </figure>
        
        <figure>
            <span id="svg-Jdenticon-toSvg-value"></span>
            <figcaption><strong>SVG</strong> toSvg(value)</figcaption>
        </figure>
        
        
        <figure>
            <span id="placeholder-svg-Jdenticon-dynamic"></span>
            <figcaption><strong>SVG</strong> dynamic</figcaption>
        </figure>
        
        <figure>
            <svg id="svg-Jdenticon-resize" data-jdenticon-value="Icon04" width="10" height="10"></svg>
            <figcaption><strong>SVG</strong> resize</figcaption>
        </figure>
        
        
        <script>
        var jdenticon_config = {
            backColor: "#00f1",
            replaceMode: "observe"
        };
        </script>
        <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.slim.min.js"></script>
        <script src="/node_modules/jdenticon/dist/jdenticon.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/require1k@1.0.1/require1k.min.js"></script>
        <script>
            // Explicit config
            setTimeout(function () {
                var explicitConfig = {
                    lightness: {
                        color: [0.00, 0.00],
                        grayscale: [0.00, 0.00]
                    },
                    saturation: {
                        color: 0.00,
                        grayscale: 0.00
                    },
                    padding: 0.08
                };
                jdenticon.update("#explicit-config-update", null, explicitConfig);
                var ctx = document.getElementById("explicit-config-drawIcon").getContext("2d");
                jdenticon.drawIcon(ctx, "Icon0", 100, explicitConfig);
                document.getElementById("explicit-config-toSvg").innerHTML = 
                    jdenticon.toSvg("Icon0", 100, explicitConfig);
                $("#explicit-config-jquery").jdenticon("Icon0", explicitConfig);
            });

            // update()
            jdenticon.update("#canvas-Jdenticon-update-value,#svg-Jdenticon-update-value", "Icon04");
            jdenticon.update("#canvas-Jdenticon-update-hash,#svg-Jdenticon-update-hash", "f97deee25dde01afb80ec1c7e4fae746492ddacb");

            // drawIcon()
            var ctx = document.getElementById("canvas-Jdenticon-drawIcon-value").getContext("2d");
            jdenticon.drawIcon(ctx, "Icon04", 100, 0.08);

            var ctx = document.getElementById("canvas-Jdenticon-drawIcon-hash").getContext("2d");
            jdenticon.drawIcon(ctx, "f97deee25dde01afb80ec1c7e4fae746492ddacb", 100, 0.08);

            // toSvg()
            document.getElementById("svg-Jdenticon-toSvg-value").innerHTML = 
                jdenticon.toSvg("Icon04", 100);

            document.getElementById("svg-Jdenticon-toSvg-hash").innerHTML = 
                jdenticon.toSvg("f97deee25dde01afb80ec1c7e4fae746492ddacb", 100);

            // jQuery
            $("#canvas-Jdenticon-jquery-value,#svg-Jdenticon-jquery-value").jdenticon("Icon04");
            $("#canvas-Jdenticon-jquery-hash,#svg-Jdenticon-jquery-hash").jdenticon("f97deee25dde01afb80ec1c7e4fae746492ddacb");
            
            // Dynamic icons
            setTimeout(function () {
                // Canvas
                document.getElementById("placeholder-canvas-Jdenticon-dynamic").innerHTML = 
                    '<canvas data-jdenticon-value="Icon04" width="100" height="100"> Error </canvas>';
                document.getElementById("canvas-Jdenticon-resize").setAttribute("width", "100");
                document.getElementById("canvas-Jdenticon-resize").setAttribute("height", "100");
                
                // Svg
                document.getElementById("placeholder-svg-Jdenticon-dynamic").innerHTML = 
                    '<svg data-jdenticon-value="Icon04" width="100" height="100"> Error </svg>';
                document.getElementById("svg-Jdenticon-resize").setAttribute("width", "100");
                document.getElementById("svg-Jdenticon-resize").setAttribute("height", "100");
            }, 1000);
        </script>
        <script src="common.js"></script>
    </body>
</html>